import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import styles from './index.less';
import TextFile from "@/components/TextFile"
import { useCallback, useEffect, useState } from 'react';

import { Flex, Radio ,RadioChangeEvent} from 'antd';

const HomePage: React.FC = () => {
	const {initialState}=useModel("@@initialState")
	console.log(`home-initialState:`,initialState)
	const [state,setState]=useState([
		{
			icon:"/js.png",
			name:"javascript"
		},
		{
			icon:"/cmd.png",
			name:"cmd"
		},
		{
			icon:"/git.png",
			name:"git"
		}
	])
	const [line,setLine]=useState(localStorage.getItem("line")==="true"?true:false)

	const changeFlex=useCallback((e:RadioChangeEvent) =>{
		setLine(e.target.value)
		console.log(`e.target.value:`,e.target.value)
		localStorage.setItem("line",e.target.value)
	},[line])
  return (
	<PageContainer ghost>
		<Flex justify="flex-end" align='center'>
			<span style={{marginRight:"10px",fontSize:"14px"}}>布局</span>
			<Radio.Group defaultValue={line} size="small" buttonStyle="solid" onChange={changeFlex}>
				<Radio.Button value={false}>大</Radio.Button>
				<Radio.Button value={true}>小</Radio.Button>
			</Radio.Group>
		</Flex>
		<div className={styles.container}>
			{state.map((i,index)=><TextFile line={line} key={index} {...i}></TextFile>)}
		</div>
	</PageContainer>
  );
};

export default HomePage;
